<template>
	<div>
		<toMenu>
			<el-button type="primary" size="mini" @click="openaddmanager">添加</el-button>
		</toMenu>
		<el-table :data="managerlist" style="width: 100%">
			<el-table-column prop="id" label="编号" width="180">
			</el-table-column>
			<el-table-column prop="memberName" label="用户名" width="180">
			</el-table-column>
			<el-table-column prop="role" label="权限">
				<template v-slot="scopt">
					<el-tag type="success" v-if="scopt.row.role==0">超级管理员</el-tag>
					<el-tag type="info" v-else-if="scopt.row.role==1">管理员</el-tag>
					<el-tag type="warning" v-else>赛亚人</el-tag>
				</template>


			</el-table-column>
			<el-table-column width="150" align="center" label="操作">
				<template v-slot="scopt">
					<el-button type="primary" size="mini" @click="openeditormanager(scopt.row)">编辑</el-button>
					<el-button type="danger" size="mini" @click="delmanager(scopt.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination background layout="prev, pager, next" :total="managercount" :page-size="3" @current-change="getmanagerlist">
		</el-pagination>

		<el-dialog title="添加管理员" :visible.sync="addmanagervisible" width="40%">
			<el-form :model="manager" label-width="80px" ref="addformdom">
				<el-form-item label="用户名" :rules="[ { required: true, message: '请输入用户名', trigger: 'blur' }]">
					<el-input v-model="manager.memberName" placeholder="请输入用户名"></el-input>
				</el-form-item>
				<el-form-item label="密码" :rules="[ { required: true, message: '请输入密码', trigger: 'blur' }]">
					<el-input v-model="manager.memberPass" placeholder="请输入密码"></el-input>
				</el-form-item>
				<el-form-item label="权限" :rules="[ { required: true, message: '请输入密码', trigger: 'blur' }]">
					<el-select v-model="manager.role" placeholder="请输入权限">
						<el-option label="超级管理员" value="0"></el-option>
						<el-option label="管理员" value="1"></el-option>
						<el-option label="赛亚人" value="2"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addmanagervisible = false">取 消</el-button>
				<el-button type="primary" @click="addmanager( 'addformdom')">确 定</el-button>

			</span>
		</el-dialog>









		<el-dialog title="修改管理员" :visible.sync="editormanagervisible" width="40%">
			<el-form :model="emanager" label-width="80px" ref="editorformdom">
				<el-form-item label="用户名" :rules="[ { required: true, message: '请输入用户名', trigger: 'blur' }]">
					<el-input v-model="emanager.memberName" placeholder="请输入用户名"></el-input>
				</el-form-item>
				<el-form-item label="密码" :rules="[ { required: true, message: '请输入密码', trigger: 'blur' }]">
					<el-input v-model="emanager.memberPass" placeholder="请输入密码"></el-input>
				</el-form-item>
				<el-form-item label="权限" :rules="[ { required: true, message: '请输入密码', trigger: 'blur' }]">
					<el-select v-model="emanager.role" placeholder="请输入权限">
						<el-option label="超级管理员" :value="0"> 超级管理员</el-option>
						<el-option label="管理员" :value="1">管理员</el-option>
						<el-option label="赛亚人" :value="2">权限</el-option>
					</el-select>

				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editormanagervisible = false">取 消</el-button>
				<el-button type="primary" @click="editormanager( 'editorformdom')">确 定</el-button>

			</span>
		</el-dialog>
	</div>

</template>
















<script>
	import toMenu from "../../components/tomenu.vue"
	export default {
		name: "manager",
		components: {
			toMenu
		},
		data() {
			return {
				managerlist: [],
				managercount: 0,
				addmanagervisible: false,
				editormanagervisible: false,
				manager: {
					memberName: "",
					memberPass: "",
					role: ""
				},
				emanager: {
					id: "",
					memberName: "",
					memberPass: "",
					role: ""
				}
			}
		},
		mounted() {
			this.getmanagerlist(1);
		},
		methods: {
			
			openaddmanager() {
				this.addmanagervisible = true
			},
			openeditormanager(getdata) {
				console.log(getdata);
				this.emanager = getdata;
				this.editormanagervisible = true
			},

			editormanager(getform) {
				var _this = this;
				this.$refs[getform].validate((valid) => {
					if (valid) {
						_this.$http({
							method: 'post',
							url: '/api/v1/adminUpdate',
							data: _this.emanager
						}).then(function(res) {
							console.log(res)
							_this.$message({
								message: res.data.info,
								type: 'success',
								duction: 1000
							})
							_this.editormanagervisible = false;
							_this.getmanagerlist(1);
						})
					} else {
						_this.$message({
							message: res.data.info,
							type: 'error',
							duction: 1500
						})
					}
				});
			},

		delmanager(id){
			var _this=this;
			_this.$http({
				url:"/api/v1/adminDel",
				method:"delete",
				headers: {
					token: JSON.parse(sessionStorage.getItem("member")).token
				},
				params:{
					id:id
				}
			}).then(function(res){
				if(res.data.code==201){
					_this.$message({
						message:res.data.info,
						type:"error",
						duration:1500
					})
				}else{
					_this.$message({
						message:res.data.info,
						type:"success",
						duration:1000,
						onClose:function(){
						_this.getmanagerlist(1);
						_this.addmanagervisible=false
						}
					})
				}
			})
		},
			addmanager(getform) {
				var _this = this;
				this.$refs[getform].validate((valid) => {
					if (valid) {
						_this.$http({
							method: 'post',
							url: '/api/v1/adminAdd',
							data: _this.manager
						}).then(function(res) {
							//console.log(res)
							if (res.data.code == 201) {
								_this.$message({
									message: res.data.info,
									type: "error",
									duration: 1500
								})
							} else {
								_this.$message({
									message: res.data.info,
									type: "success",
									duration: 1000,
									onClose: function() {
										_this.getmanagerlist(1);
						_this.addmanagervisible=false
									}
								})
							}
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			getmanagerlist(getpage) {
				var _this = this;
				
				_this.$http.get('/api/v1/adminList', {
					headers: {
						token: JSON.parse(sessionStorage.getItem("member")).token
					},
					params: {
						page: getpage,
						pageSize: 3
					}
				}).then(function(res) {
					console.log(res);
					if (res.data.code == 200) {
						_this.managerlist = res.data.data.list
						_this.managercount = res.data.data.count
					}
				})
			}
		}
	}
</script>

<style>
</style>
